<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>




<div class="warrper">
    <div class="container">
        <div class="main-top">
            <div class="main-tl"><input type="text" id="ipt" placeholder="请在此输入城市"></div>
            <div class="main-tr"><span id="cnty"></span> > <span id="city"></span></div>
        </div>
        <div class="main-ct">
            <div class="main-cl bg">今天</div>
            <div class="main-cr active">七天</div>
        </div>
        <div class="main-ft">
            <ul>
                <li class="li1">
                    <p><span class="date"></span>
                        <br>（今天）</p>
                    <p class="txt"></p>
                    <p>
                        <span class="max"></span>℃
                        /
                        <span class="min"></span>℃
                    </p>
                    <p class="dir"></p>
                    <p><span class="sc"></span>级</p>
                </li>
                <li class="li2">
                    <p><span class="date"></span>
                        <br>（明天）</p>
                    <p class="txt"></p>
                    <p>
                        <span class="max"></span>℃
                        /
                        <span class="min"></span>℃
                    </p>
                    <p class="dir"></p>
                    <p><span class="sc"></span>级</p>
                </li>
                <li class="li3">
                    <p><span class="date"></span>
                        <br>&nbsp;</p>
                    <p class="txt"></p>
                    <p>
                        <span class="max"></span>℃
                        /
                        <span class="min"></span>℃
                    </p>
                    <p class="dir"></p>
                    <p><span class="sc"></span>级</p>
                </li>
                <li class="li4">
                    <p><span class="date"></span>
                        <br>&nbsp;</p>
                    <p class="txt"></p>
                    <p>
                        <span class="max"></span>℃
                        /
                        <span class="min"></span>℃
                    </p>
                    <p class="dir"></p>
                    <p><span class="sc"></span>级</p>
                </li>
                <li class="li5">
                    <p><span class="date"></span>
                        <br>&nbsp;</p>
                    <p class="txt"></p>
                    <p>
                        <span class="max"></span>℃
                        /
                        <span class="min"></span>℃
                    </p>
                    <p class="dir"></p>
                    <p><span class="sc"></span>级</p>
                </li>
                <li class="li6">
                    <p><span class="date"></span>
                        <br>&nbsp;</p>
                    <p class="txt"></p>
                    <p>
                        <span class="max"></span>℃
                        /
                        <span class="min"></span>℃
                    </p>
                    <p class="dir"></p>
                    <p><span class="sc"></span>级</p>
                </li>
                <li class="li7">
                    <p><span class="date"></span>
                        <br>&nbsp;</p>
                    <p class="txt"></p>
                    <p>
                        <span class="max"></span>℃
                        /
                        <span class="min"></span>℃
                    </p>
                    <p class="dir"></p>
                    <p><span class="sc"></span>级</p>
                </li>
            </ul>
        </div>
        <div class="main-db">
            <div class="db-top">
                <span class="momo">分时段预报</span>
                <div class="mdb-fsd">
                    <ul>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                        <li>
                            <p><span class="tmp"></span>时</p>
                            <p class="cond_txt"></p>
                            <p class="wind_dir"></p>
                            <p><span class="wind_sc"></span>级</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="db-bottom">
                <span class="fsd">生活指数</span>
                <ul>
                    <li>
                        <div class="li-left">
                            <i class="i1"></i>
                            <span>紫外线指数</span>
                        </div>
                        <div class="li-right">
                            <h3 id="uv">1</h3>
                            <p id="uvtxt">1</p>
                        </div>
                    </li>
                    <li>
                        <div class="li-left">
                            <i class="i2"></i>
                            <span>减肥指数</span>
                        </div>
                        <div class="li-right">
                            <h3 id="sport"></h3>
                            <p id="sporttxt"></p>
                        </div>
                    </li>
                    <li>
                        <div class="li-left">
                            <i class="i3"></i>
                            <span>健臻·血糖指数</span>
                        </div>
                        <div class="li-right">
                            <h3 id="trav"></h3>
                            <p id="travtxt"></p>
                        </div>
                    </li>
                    <li>
                        <div class="li-left">
                            <i class="i4"></i>
                            <span>穿衣指数</span>
                        </div>
                        <div class="li-right">
                            <h3 id="drsg"></h3>
                            <p id="drsgtxt"></p>
                        </div>
                    </li>
                    <li>
                        <div class="li-left">
                            <i class="i5"></i>
                            <span>洗车指数</span>
                        </div>
                        <div class="li-right">
                            <h3 id="cw"></h3>
                            <p id="cwtxt"></p>
                        </div>
                    </li>
                    <li>
                        <div class="li-left">
                            <i class="i6"></i>
                            <span>空气污染扩散指数</span>
                        </div>
                        <div class="li-right">
                            <h3 id="air"></h3>
                            <p id="airtxt"></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


    <script src="js/script.js"></script>

</body>
</html>